<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登入</title>
<meta name="viewport"
  content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css"
  href="/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
  href="/bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
  <link rel="icon" href="/static/ico/favicon.ico">
<!-- 自定义样式 -->
<!-- <link rel="stylesheet" type="text/css" href="css/layout3.css" /> -->
<link th:href="@{/css/layout3.css}" type="text/css" rel="stylesheet">
<script type="text/javascript"> 
function checkPassword(){
	  if($("#pwd").val().length==0){
		  $("#password-test").html('密码不能为空');
		  return isPassword=false;
	  }else{
		  $("#password-test").html('');
		  return isPassword=true;
	  }
}
function checkUsername(){
	  if($("#name").val().length<2||$("#name").val().length>15){
		  $("#username-test").html('用户名长度在2-15');
		  return isUsername=false;
	  }else{
		  $("#username-test").html('');
		  return isUsername=true;
	  }
}
</script>
</head>
<body>
  <!--登录页标题-->
  <header>
    <div class="container">
      <div class="row">
        <div class="col-md-offset-2 col-md-8">
          <h1>
            <small>欢迎使用</small> <b>Smart</b> Blogs
          </h1>
        </div>
      </div>
    </div>
  </header>
  <div class="container">
    <div class="row">
      <div class="col-md-offset-2 col-md-8">
        <!--登录面板-->
        <div class="panel panel-primary">
          <!--面板标题-->
          <div class="panel-heading">
            <h2 class="panel-title">登录</h2>
          </div>
          <!--面板主体-->
          <div class="panel-body">
            <!--登录表单-->
            <form id="form-log" class="form-horizontal" role="form" >
              <!--用户名-->
              <div class="form-group">
                <label for="name" class="col-md-2 control-label">用户名</label>
                <div class="col-md-8">
                  <input th:value=${username} type="text" class="form-control" id="name"
                    name="name" placeholder="请输入用户名" Onblur="checkUsername()">
                    <span id="username-test" style="color:red;font-size:8px;margin:5px" ></span>
                </div> 
              </div>
              <!--密码-->
              <div class="form-group">
                <label for="pwd" class="col-md-2 control-label">密码</label>
                <div class="col-md-8">
                  <input th:value=${password} type="password" class="form-control" id="pwd"
                    name="pwd" placeholder="请输入密码" Onblur="checkPassword()">
                    <span id="password-test" style="color:red;font-size:8px;margin:5px" ></span>
                </div>
              </div>
              <!--记住用户名和密码-->
              <div class="form-group">
                <label for="rem" class="col-md-2 control-label"    style=" padding-top: 10px;">记住</label>
                <div class="col-md-8">
                  <input type="checkbox" class="form-control" id="rem"
                    name="rem" style="    width: 30px;">
                </div>
              </div>
              <!--登录按钮-->
              <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                  <input type="button" id="btn-log" value="登录"
                    class="btn btn-default sublogin">
                </div>
              </div>
            </form>
          </div>
        </div>
        <!--注册和不登录直接进入博客的链接-->
        <div>
          <span><a href="/user/regist">免费注册账号</a></span> <span
            class="pull-right"><a href="/">进入博客</a></span>
        </div>
      </div>
    </div>
  </div>
  <!--网页页脚-->
  <footer>
    <div class="container">
      <div class="text-center">
        Copyright © 2018 Tedu.cn All Rights Reserved <br />
        京ICP备08000853号-56 <a target="_blank" href="http://www.tedu.cn/">杭州上行科技有限公司掘CSDN</a>
        版权所有
      </div>
    </div>
  </footer>
</body>
<script type="text/javascript" src="/bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="/bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="/bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="/bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="/bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="/bootstrap3/js/respond.min.js"></script>
<script type="text/javascript">
$("#btn-log").click(function() {
  $.ajax({
    "url" : "login/dologin",
    "data" : $("#form-log").serialize(),
    "type" : "POST",
    "dataType" : "json",
    "success" : function(result) {
      if (result.status == 200) {
        // 跳转路径
        alert(result.msg);
        window.location.href = '/';
      }else{
        alert(result.msg);
      }
    }
  });
});
</script>
</script>
</html>